<template>
  <div class="map-container">
    <!-- 地图容器 -->
    <div id="map" class="map"></div>
    <!-- 测量子组件 -->
    <MeasureTool :map="map"/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';
import MeasureTool from './MeasurementControls.vue'; // 引入测量子组件

// 使用 ref 创建响应式状态来持有地图实例
const map = ref(null);

// 使用 onMounted 替代 mounted 生命周期钩子
onMounted(() => {
  initMap();
});

// 将 initMap 方法定义为一个函数
const initMap = () => {
  // 创建天地图矢量图层
  const tdtVectorLayer = new TileLayer({
    title: "天地图矢量图层底图",
    source: new XYZ({
      url: 'http://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=4b42399f4d41ff33c03dd9fa6e48ead4',
      wrapX: false
    })
  });

  // 创建天地图矢量注记图层
  const tdtVectorLabelLayer = new TileLayer({
    title: "天地图矢量注记图层",
    source: new XYZ({
      url: 'http://t1.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=4b42399f4d41ff33c03dd9fa6e48ead4',
      wrapX: false
    })
  });

  // 初始化地图对象，并赋值给 ref 的 .value
  map.value = new Map({
    target: 'map', // 绑定到地图容器
    layers: [tdtVectorLayer, tdtVectorLabelLayer], // 添加图层
    view: new View({
      center: fromLonLat([114.30, 30.50]), // 设置中心点
      zoom: 1, // 设置缩放级别
      projection: 'EPSG:3857' // 设置投影
    })
  });
};
</script>

<!-- 为了在 Vue Devtools 中显示组件名，可以额外添加一个 script 块 -->
<script>
export default {
  name: 'MapParent'
}
</script>
<style>
.map-container {
  width: 100%;
  height: 800px;
  position: relative;
}

.map {
  width: 100%;
  height: 500px;
}

/* 自定义缩放控件的样式 */
.ol-zoom {
  top: 5px;
  left: 5px;
}

.ol-zoom button {
  width: 10px !important; /* 调整按钮宽度 */
  height: 10px !important; /* 调整按钮高度 */
  font-size: 5px !important; /* 调整按钮字体大小 */
}
</style>